<template>
  <div class="home">
    <div class="mb-20" >
      <CricleCard  @company-change="handleCompanyChange"/>
    </div>
    <div class="mb-20">
      <SalaryComparison :selected-companies="selectedCompanies" />
    </div>
      <div class="mb-10">
      <ZuiXinChou />
    </div>
    <div class="mb-20">
      <ZuiXinChouCard />
    </div>
    <div class="mb-20">
      <ZhiChangTuCao />
    </div>
    <div class="mb-20">
      <Roastlist  />
    </div>
    <!-- <div class="mb-20">
      <XinZhiFenXi />
    </div> -->
  </div>
</template>

<script >

import CricleCard from '@/components/CricleCard.vue'
import SalaryComparison from '@/components/SalaryComparison.vue'
import ZuiXinChou from '@/components/ZuiXinChou.vue'      //最新薪酬栏目
import ZuiXinChouCard from '@/components/ZuiXinChouCard.vue'   //最新薪酬列表
import ZhiChangTuCao from '@/components/ZhiChangTuCao.vue'   //职场吐槽
// import TuCaoCard from '@/components/TuCaoCard.vue'          
import Roastlist from '@/views/RoastlistFour.vue'         //职场吐槽列表之展示4条
// import XinZhiFenXi from '@/components/XinZhiFenXi.vue'


export default {
  name: 'HomePage',
  components: {
    CricleCard,
    SalaryComparison,
    ZuiXinChou,
    ZuiXinChouCard,
    ZhiChangTuCao,
    Roastlist
  },
  data() {
    return {
      selectedCompanies: null,
      isReady: false
    }
  },
  methods: {
    handleCompanyChange(companies) {
      console.log('Home 组件接收到 company-change 事件:', companies)
      this.selectedCompanies = companies
    },
    
  },
  mounted() {
    // 延迟 100ms 确保 Vite 代理就绪
    setTimeout(() => {
      this.isReady = true
    }, 100)
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
/* 自定义间距类 */
.mb-20 {
  margin-bottom: 40px !important;
}
</style>